<style>
    .mockup-bg {
        background: url("__CDN__/assets/addons/facrm/img/statusbar.png") center 20px no-repeat;
        width: 375px;
        min-width: 375px;
        height: 800px;
        display: block;
        float: left;
        box-shadow: 0 4px 25px 0 rgba(4, 40, 60, .15);
        border-radius: 25px;
        padding: 44px 10px 10px 10px;
        margin-right: 30px;
    }

    .mockup-bg iframe {
        height: 100%;
        width: 100%;
    }

    #configbody .form-group {
        width: 50%;
        float: left;
    }

    #configbody .control-label {
        font-weight: normal;
        line-height: 31px;
    }

    #configbody h2 {
        clear: both;
        width: 100%;
        font-size: 14px;
        border-bottom: 1px solid #eee;
        padding: 0px 10px 10px;
        margin-bottom: 10px;
        font-weight: bold;
    }

    #configbody h2:before {
        content: ' ';
        display: block;
        width: 3px;
        height: 15px;
        background: #0a8cd2;
        float: left;
        margin-right: 10px;
    }

    .tabbarlist {
        display: block;
        width: 100%;
        clear: both;
        margin-top: 10px;
    }

    .tabbarlist table {
        margin-bottom: 0px;
    }

    .tabbarlist table tr td img {
        cursor: pointer;
    }
    .form-group{
        margin-bottom: 2px;
    }
    .table  td{
        padding: 5px !important;
    }
</style>
<div class="panel panel-default panel-intro">
    {:build_heading()}

    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="row">
                <div class="col-xs-12 col-sm-12 tab-content">
                    <div style="position:relative;min-height:820px;display:flex;">
                        <div class="mockup-bg">
                            {php}
                            $preview_url= \request()->domain()."/facrm/#/pages/login/index?preview=1";
                            {/php}

                            <iframe scrolling="auto" frameborder="0" src="{$preview_url}" class="iframe" id="previewiframe"></iframe>

                            <div class="form-group" style="margin-top: 15px">
                                <label class="control-label col-xs-12 col-sm-2">预览地址</label>
                                <div class="col-xs-12 col-sm-10">
                                    <input type="text"  class="form-control "
                                           value="{$preview_url}" id="preview_url" placeholder="">
                                </div>
                            </div>


                        </div>

                        <div class="" style="flex:1;">
                            <form id="config-form" action="" role="form" method="post">
                                <input type="hidden" name="preview" value="0" />
                                <div class="" id="configbody">
                                    <h2>基本配置</h2>
                                    <div class="" id="color">
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">主配色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-theme-color" class="form-control" name="theme[color]" type="text" style="background-color: {$themeConfig.theme.color}" value="{$themeConfig.theme.color}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">辅助色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-theme-bgColor" class="form-control" name="theme[bgColor]" type="text" style="background-color: {$themeConfig.theme.bgColor}" value="{$themeConfig.theme.bgColor}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>




                                        <div class="form-group">
                                            <label for="" class="control-label col-xs-12 col-sm-4">名称:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group">

                                                    <input type="text" name="theme[title]" class="form-control "
                                                           value="{$themeConfig.theme.title}" id="theme_title" placeholder="名称" style="width:120px;">

                                                </div>

                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label for="" class="control-label col-xs-12 col-sm-4">LOGO:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group">

                                                    <input type="hidden" name="theme[logo]" class="form-control "
                                                           value="{$themeConfig.theme.logo}" id="theme_logo" placeholder="">

                                                    <img src="{$themeConfig.theme.logo}" title="点击选择"
                                                         class="fachoose tabbar-img-preview" width="32" alt="" id="theme_logo_select"
                                                         data-input-id="theme_logo"
                                                         data-mimetype="image/*" data-multiple="false">
                                                    <span style="margin-left: 5px"><button type="button" id="fachoose-image" class="btn btn-primary fachoose" data-input-id="theme_logo" data-mimetype="image/*" data-multiple="false">
                                                            <i class="fa fa-list"></i> 选择</button></span>

                                                </div>

                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="" class="control-label col-xs-12 col-sm-4">描述:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <input type="text" name="theme[discription]" class="form-control "
                                                       value="{$themeConfig.theme.discription}" id="theme_discription" placeholder="英文逗号隔开" >

                                            </div>
                                        </div>


                                    </div>
                                    <h2>顶部导航栏</h2>
                                    <div class="" id="navbar">

                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">标题颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-navbar-titleColor" class="form-control" name="navbar[titleColor]" type="text"
                                                           value="{$themeConfig.navbar.titleColor}" style="background-color: {$themeConfig.navbar.titleColor}" >
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">背景颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-navbar-bgColor-background" class="form-control" name="navbar[bgColor][background]" type="text"
                                                           value="{$themeConfig.navbar.bgColor.background}" style="background-color: {$themeConfig.navbar.bgColor.background}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;">
                                                    <img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">返回按钮颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-navbar-backIconColor" class="form-control" name="navbar[backIconColor]" type="text"
                                                           value="{$themeConfig.navbar.backIconColor}" style="background-color: {$themeConfig.navbar.backIconColor}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">返回文字颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-navbar-backTextStyle-color" class="form-control" name="navbar[backTextStyle][color]" type="text"
                                                           alue="{$themeConfig.navbar.backTextStyle.color}" style="background-color: {$themeConfig.navbar.backTextStyle.color}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">标题文字大小:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <input class="form-control" name="navbar[titleSize]" type="number" value="{$themeConfig.navbar.titleSize}" style="width:120px;">
                                            </div>
                                        </div>
                                    </div>

                                    <h2>底部导航栏</h2>
                                    <div class="" id="tabbar">
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">文字颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-tabbar-color" class="form-control" name="tabbar[color]" type="text"
                                                           style="background-color: {$themeConfig.tabbar.color}"
                                                           value="{$themeConfig.tabbar.color}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">文字颜色(选中):</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-tabbar-selectColor" class="form-control" name="tabbar[selectColor]" type="text"
                                                           style="background-color: {$themeConfig.tabbar.selectColor}"
                                                           value="{$themeConfig.tabbar.selectColor}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">背景颜色:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-tabbar-bgColor" class="form-control" name="tabbar[bgColor]" type="text"
                                                           style="background-color: {$themeConfig.tabbar.bgColor}"
                                                           value="{$themeConfig.tabbar.bgColor}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">高度:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <input class="form-control" name="tabbar[height]" type="number" value="{$themeConfig.tabbar.height}" style="width:120px;">
                                            </div>
                                        </div>


                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">顶部横线:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <div class="input-group" style="width:120px;">
                                                    <input id="c-tabbar-borderTop" class="form-control" name="tabbar[borderTop]" type="text"
                                                           style="background-color: {$themeConfig.tabbar.borderTop}"
                                                           value="{$themeConfig.tabbar.borderTop}">
                                                    <span class="input-group-btn">
                                                <button type="button" class="btn btn-default btn-color colorpicker" style="padding:0;margin-left:1px;"><img src="__CDN__/assets/addons/facrm/img/colorful.png" height="29" alt=""></button>
                                                <span class="msg-box n-right" for="c-title"></span>
                                                </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label class="control-label col-xs-12 col-sm-4">按钮大小:</label>
                                            <div class="col-xs-12 col-sm-8">
                                                <input class="form-control" name="tabbar[iconSize]" type="number" value="{$themeConfig.tabbar.iconSize}" style="width:120px;">
                                            </div>
                                        </div>

                                        <div class="form-group" style="width:100%;clear:both;">
                                            <label class="control-label col-xs-12 col-sm-2">按钮配置:</label>
                                            <div class="col-xs-12 col-sm-12">
                                                <div class="tabbarlist">
                                                    <table class="fieldlist table table-no-bordered" data-name="tabbar[list]" data-template="tabbarlisttpl" data-tag="tr">
                                                        <tr>
                                                            <td>图片</td>
                                                            <td>图片(选中)</td>
                                                            <td class="text-center">底部文字</td>
                                                            <td>页面路径</td>
                                                            <td></td>
                                                        </tr>
                                                        <tr>
                                                            <td colspan="6">




                                                                <a href="javascript:;" class="btn btn-sm btn-success btn-append"><i class="fa fa-plus"></i> {:__('Append')}</a></td>
                                                        </tr>
                                                        <textarea name="tabbar[list]" class="form-control hide" cols="30" rows="5">{$themeConfig.tabbar.list|json_encode}</textarea>
                                                    </table>
                                                </div>
                                            </div>

                                        </div>

                                    </div>
                                    <div class="clearfix"></div>
                                </div>
                                <div style="display: block;width:100%;border-top:1px solid #eee;padding-top:15px;">
                                    <div class="form-group">
                                        <div class="col-xs-12 col-sm-12">
                                            <button type="button" class="btn btn-primary btn-preview" data-preview="1"><i class="fa fa-eye"></i> 预览</button>
                                            <button type="button" class="btn btn-success btn-save" data-preview="0"><i class="fa fa-check"></i> 保存</button>

                                            <button type="button" class="btn btn-danger btn-del" data-preview="2"><i class="fa fa-recycle"></i> 恢复默认</button>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>

<!--@formatter:off-->
<script type="text/html" id="tabbarlisttpl">
    <tr class="tabbarlist-item">
        <td>
            <input type="hidden" name="<%=name%>[<%=index%>][image]" class="form-control tabbar-img-value" value="<%=row.image%>" id="c-<%=index%>-image" placeholder="" size="10"/>
            <img src="<%=row.image?row.image:'__CDN__/assets/addons/facrm/img/plus.png'%>" title="点击选择" class="fachoose tabbar-img-preview" width="32" alt="" id="fachoose-<%=index%>-image" data-input-id="c-<%=index%>-image" data-mimetype="image/*" data-multiple="false">
        </td>
        <td>
            <input type="hidden" name="<%=name%>[<%=index%>][selectedImage]" class="form-control tabbar-img-value" value="<%=row.selectedImage%>" id="c-<%=index%>-selectedImage" placeholder="名称"/>
            <img src="<%=row.selectedImage?row.selectedImage:'__CDN__/assets/addons/facrm/img/plus.png'%>" title="点击选择" class="fachoose tabbar-img-preview" width="32" alt="" id="fachoose-<%=index%>-selectedImage" data-input-id="c-<%=index%>-selectedImage" data-mimetype="image/*" data-multiple="false">
        </td>
        <td class="text-center"><input type="text" name="<%=name%>[<%=index%>][text]" class="form-control text-center" value="<%=row.text%>" placeholder="" style="width:80px;"/></td>

        <td>
            <div class="input-group">
                <input type="text" name="<%=name%>[<%=index%>][path]" class="form-control" value="<%=row.path%>" placeholder="页面路径"/>
                <div class="input-group-btn">
                    <input type="button" value="选择" class="btn btn-info btn-select-page" />
                </div>
            </div>
        </td>
        <td>
            <span class="btn btn-sm btn-danger btn-remove"><i class="fa fa-times"></i></span>
            <span class="btn btn-sm btn-primary btn-dragsort"><i class="fa fa-arrows"></i></span>
        </td>
    </tr>
</script>
<!--@formatter:on-->
